<template>
	<div class="pattern-box">
		<canvas class="canvas-box" ref="canvasBox" id="canvasBox" width="750" height="1334"></canvas>
		<img ref="base64Img" @click="base64ImgClick" v-if="dataUrl" class="dataUrl" :src="dataUrl" />
	</div>
</template>

<script>
	require('jr-qrcode');
	export default {
		props: {
			postImg: String,
			txBase: String,
			correct: Number,
		},
		data() {
			return {
				ERcode: this.$lockr.get("ERcode"), 
				liveTheme: window.sessionStorage.getItem("lookBackTopic"), //主题
				//liveTheme: '中山北二路与江浦路路口南侧路路口南侧阮光远汤雅莉1111', //主题
				dataUrl: '',
			}
		},
		watch: {
			isBuildImg(val, oldVal) {
			},
			txBase(v, oldVal) {
				if(v != '') {
				}
			}
		},
		computed: {
			isBuildImg() {
				if(this.txBase != '' && this.postImg != '') {
					this.startCanvas()
					return true
				} else {
					return false
				}
			},
			nickname() {
				return this.$store.state.userInfo.nickname||this.$store.state.userInfo.un
			}
		},
		created() {
		},
		mounted: function() {
			//console.log(document.body.clientWidth)//375
		},
		methods: {
			base64ImgClick() {
				this.$emit("msgParent", {
					type: "closeSlide",
					data: 'ruan'
				});
			},
			startCanvas() {
				let c = this.$refs.canvasBox;
				let ctx = c.getContext("2d");
				const posterBg = new Image();
				posterBg.src = require('../../assets/images/invitation/lookBackBg' + Number(this.correct + 1) + '.png');
				posterBg.onload = () => {
					ctx.drawImage(posterBg, 0, 0, 750, 1334);
					const TXImg = new Image();
					TXImg.src = this.txBase;
					TXImg.onload = () => {
						switch(this.correct) {
							case 0:
								ctx.drawImage(TXImg, 101, 218, 87, 87); //起始   +大小	
								ctx.fillStyle = "#2067C6";
								ctx.font = "36px Arial";
								ctx.textAlign="start";
								ctx.fillText(this.$store.state.userInfo.nickname||this.$store.state.userInfo.un, 229, 250); //昵称
								//绘制主题
								ctx.fillStyle = "#2569C8";
								ctx.font = "normal small-caps bold 28px Microsoft Yahei In-Bold Font";
								ctx.textAlign = "center"; //以定位参考线 居中 就是下面的 373的位置
								if(this.liveTheme.length>21){
								   ctx.fillText(this.liveTheme.slice(0,21)+'...', 373, 720);
								}else{
								   ctx.fillText(this.liveTheme, 373, 720);
								}
								//绘制时间
//								ctx.fillStyle = "#FFFFFF";
//								ctx.font = "25px Microsoft Yahei";
//								ctx.textAlign = "center"; 
//								ctx.fillText(this.liveTime.slice(6), 384, 778);
								break;
							case 1:
								ctx.drawImage(TXImg, 101, 218, 87, 87); //起始   +大小
								//绘制昵称
								ctx.fillStyle = "#A46141";
								ctx.font = "36px Arial";
								ctx.textAlign="start";
								ctx.fillText(this.$store.state.userInfo.nickname||this.$store.state.userInfo.un, 229, 250);
								//绘制主题
								ctx.fillStyle = "#AA562C";
								ctx.font = "normal small-caps bold 28px Microsoft Yahei In-Bold Font";
								ctx.textAlign = "center"; 
								if(this.liveTheme.length>21){
								   ctx.fillText(this.liveTheme.slice(0,21)+'...', 373, 720);
								}else{
								   ctx.fillText(this.liveTheme, 373, 720);
								}
								break;
							case 2:
								ctx.drawImage(TXImg, 101, 218, 87, 87);
								//绘制昵称
								ctx.fillStyle = "#2067C6";
								ctx.font = "36px Arial";
								ctx.textAlign="start";
								ctx.fillText(this.$store.state.userInfo.nickname||this.$store.state.userInfo.un, 229, 250);
								ctx.fillStyle = "#2569C8";
								ctx.font = "normal small-caps bold 28px Microsoft Yahei In-Bold Font";
								ctx.textAlign = "center"; 
								if(this.liveTheme.length>21){
								   ctx.fillText(this.liveTheme.slice(0,21)+'...', 373, 720);
								}else{
								   ctx.fillText(this.liveTheme, 373, 720);
								}
								break;
							case 3:
								ctx.drawImage(TXImg, 101, 218, 87, 87);
								ctx.fillStyle = "#A9552C";
								ctx.font = "36px Arial";
								ctx.textAlign="start";
								ctx.fillText(this.$store.state.userInfo.nickname||this.$store.state.userInfo.un, 229, 250); 
								ctx.fillStyle = "#AA562C";
								ctx.font = "normal small-caps bold 28px Microsoft Yahei In-Bold Font";
								ctx.textAlign = "center";
								if(this.liveTheme.length>21){
								   ctx.fillText(this.liveTheme.slice(0,21)+'...', 373, 720);
								}else{
								   ctx.fillText(this.liveTheme, 373, 720);
								}
								break;
							default:
								break;
						}
							//绘制素材图片
							const SCImg = new Image();
							SCImg.src = this.postImg;
							SCImg.onload = () => {
								ctx.drawImage(SCImg, 110, 371, 536, 303); //起始   +大小														
								//绘制二维码
								const ERImg = new Image();
								let imgBase64 = jrQrcode.getQrBase64(this.ERcode);
								ERImg.src = imgBase64;
								ERImg.onload = () => {
									ctx.drawImage(ERImg, 265, 760, 225, 225);
									let dataURL = c.toDataURL("image/png");
									this.dataUrl = dataURL
									this.$emit("msgParent", {
										type: "closeLoading",
										data: 'ruan'
									});

								}

							}

					}

				}
			}
		}
	}
</script>

<style scoped="scoped">
	.canvas-box {
		width: 750px;
		height: 1334px;
		margin: 0 auto;
		background: white;
	    display: none;
	}
	
	.dataUrl {
		width: 750px;
		height: 1334px;
		position: relative;
		z-index: 1;
	}
</style>